<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>活动详情</title>
<link href="<%=path%>/favicon.ico" rel="shortcut icon">
<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">


</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12 text-right">
			   <i class="fa fa-times" onclick="javascript:colseMedicineModal()"></i>
			</div>
			<div class="col-md-12 text-center">
			   <h4>选择商品</h4>
			</div>
		    <div class="col-md-12" style="margin-top:15px">
		       <form action="" class="form-inline col-sm-6">
				    <div class="form-group">
				       <label>关键字</label>
				       <input class="form-control" id="keyWord" type="text" placeholder="输入关键字" maxlength="12" onblur="checkLength(this)">
				    </div>
				    <div class="form-group" style="margin-left: 15px;">
				        <button id="bm_csous"   type="button" class="btn btn-primary">搜索
	                    </button>
				    </div>
			   </form>
		    </div>
		    <div class="col-sm-12" style="margin-top:20px;">	
                <div class="ibox float-e-margins">
                    <div class="table-responsive">
                         <table class="table-striped table-bordered table-hover" id="medicineDataTable" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>商品名称</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                        </table>
                    </div>                 
                </div>
            </div>
		   
		    <div class="col-md-12 text-center" style="width:858px;">
		        <div class="col-md-3"></div>
		        <button type="button" onclick="javascript:colseMedicineModal();" class="col-md-2 btn btn-w-m btn-outline btn-primary">取消</button> 
		        <div class="col-md-2"></div>
			    <button type="button" onclick="javascript:determineMedicine();" class="col-md-2 btn btn-w-m btn-primary">确定</button> 
			    <div class="col-md-3"></div>
		    </div>
	    </div>			
	</div>
</div>
    
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    
   
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>


<script type="text/javascript">

/* $(document).on('ifChecked', '.select_one', function() {
	
	$(".childCheckbox").parent().removeClass("checked");
	$(this.id).children().addClass("checked");
	
}); */

    
</script>

<script type="text/javascript">
$(function(){
	    var path = "<%=path%>";
	    var medicineDataTable;
	    var access_token=$.cookie('access_token');
	   	var cid=$.cookie('cid');
	   	var uid=$.cookie('uid');
	   	var keyWord="";
	  
	   	
	    
	    $(function(){
	    	init();
	    	
	    });
	    
	    function init(){
	    	medicineDataTable = dataTable();
	    }
	    
	    function dataTable(){
	    	return $('#medicineDataTable').DataTable({
	    		processing: true,
	    		ordering: false,
	    		searching: false,
	    		info: true,
	    		autoWidth: true,
	    		lengthChange: false,
	    		"order": [[ 2, "desc" ]],
	    	    language: {
	    	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:100px 0;margin:0;">   <p>暂无药品数据</p></div>',
	    	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
	    			infoEmpty: '没有数据',
	    			lengthMenu: '每页显示 _MENU_ 条记录',
	    			loadingRecords: '正在加载数据....',
	    			processing: '正在处理数据....',
	    			zeroRecords: '没有找到匹配的记录',
	    			paginate: {
	    				first: '首页',
	    				previous: '前页',
	    				next: '后页',
	    				last: '尾页'
	    			}
	    	    },
	    	    order: [[1,'desc']],
	    		pageLength: 5,
	    	    pagingType: 'full_numbers',
	    	    columnDefs: [{
	    			render: function(data, type, full) {
	    				var result="";
	    				if(IsCheck(data)){
	    					if(medicineIdsMap.has(data)){
	    						medicineNamesMap.set(full.medicine_name,full.medicine_name);
		    			 		medicineIdsMap.set(data,data);
	    					}
	    					result='<div class="checkbox i-checks"><label class="is_checkd select_one"><input  checked="checked" class="childCheckbox" type="checkbox" medicineName="'+full.medicine_name+'" id="'+data+'"></label></div>';
	    				}else{
	    					result='<div class="checkbox i-checks"><label class="is_checkd select_one"><input  class="childCheckbox" type="checkbox" medicineName="'+full.medicine_name+'" id="'+data+'"></label></div>';
	    				}
	                    return result;
	                },
	    			targets: 0
	    		}],
	    	    columns: func_columns(),
	    	    serverSide: true,
	    	   
	    	    ajax: {
	    	    	contentType: 'text/plain;charset=utf-8',
	    	    	type: 'POST',
	    	    	url: func_AjaxUrl(),
	    	    	data: function(d){
	    	    		d.keyWord=keyWord;
	    				return JSON.stringify(d);
	    			}
	    		}
	    	    ,
	    	    "initComplete": function(settings, json) {
	    	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    	      }
	    	}).on( 'draw', function () {
	    		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});

	    	} );
	    	
	    }
	    
	    
	    
	    
	    
	    function func_AjaxUrl(){
	    	return path+"/api/ser/medicineList";
	    }
	    /**
	     *	设置列名，对应后台
	     */
	    function func_columns(){
	    	var jsonArr = [
	    		{"data":"id"},
	    		{"data":"medicine_name"},
	    		
	    	];
	    	return jsonArr;
	    }
	    
	    $('#bm_csous').on('click',function(){
	    	keyWord=$('#keyWord').val();
	        func_dataTableReload();
	    })
	    
	    function func_dataTableReload(){
        	medicineDataTable.ajax.reload(function(){
        		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
        		$('input').iCheck('uncheck');
        	});
        }
	    
	     $(document).on('ifChecked', '.childCheckbox', function() { 
	     	$(this).attr("checked","checked"); 
	 		$(this).parent().addClass("checked");
/* 	 		console.log(this.id);
	 		modelIds[this.id]=name; */
	 		medicineIds.length=0;
	 		medicineNames.length=0;
	 		var name=$(this).attr('medicineName');
	 		medicineNamesMap.set(name,name);
	 		medicineIdsMap.set(this.id,this.id);
	 		/* modelIds[this.id]=this.id; */
	 		medicineIdsMap.forEach(function (element, index, array) {
	 		    // element: 指向当前元素的值
	 		    // index: 指向当前索引
	 		    // array: 指向Array对象本身
	 		    medicineIds.push(element);
	 		});
	 		medicineNamesMap.forEach(function (element, index, array) {
	 		    // element: 指向当前元素的值
	 		    // index: 指向当前索引
	 		    // array: 指向Array对象本身
	 		    medicineNames.push(element);
	 		});
	     });
	     $(document).on('ifUnchecked', '.childCheckbox', function() { 
	     	$(this).removeAttr("checked","checked"); 
	 		$(this).parent().removeClass("checked");
	 		var name=$(this).attr('medicineName');
	 		medicineIds.length=0;
	 		medicineNames.length=0;
	 		medicineIdsMap.delete(this.id);
	 		medicineNamesMap.delete(name);
	 		medicineIdsMap.forEach(function (element, index, array) {
	 		    // element: 指向当前元素的值
	 		    // index: 指向当前索引
	 		    // array: 指向Array对象本身modelIds
	 			 medicineIds.push(element);
	 		});
	 		medicineNamesMap.forEach(function (element, index, array) {
	 		    // element: 指向当前元素的值
	 		    // index: 指向当前索引
	 		    // array: 指向Array对象本身
	 			 medicineNames.push(element);
	 		});
	 		
	     });
	     
	     //判断是否被选中
	     function IsCheck(id){
	    	 var result=false;
	    	 for(var i in medicineIds){
	    		 if(medicineIds[i]==id){
	    			 console.log("medicineIds2222-------->"+medicineIds.join(","));
	    			 result=true;
	    			 break; 
	    		 }
	    	 }
	    	 return result;
	     }
	     
	    
	    
});
</script> 


</body>
</html>